<template>
    <div id="tmpl">
        <mt-header fixed title="Vue商城系统">
			<router-link to="/home" slot="left">
				<mt-button icon="back">返回</mt-button>
			</router-link>
			 <mt-button icon="more" slot="right"></mt-button> 
		</mt-header>
        <div id="cate">
            <ul v-bind="{style:'width:'+ulWidth+'px'}">
                <li @click="getimgs(0)">全部</li>
                <li v-for="item in cates" @click="getimgs(item.id)">{{item.title}}</li>
            </ul>
        </div>
        <div id="imglist">
            <ul>
                <li v-for="item in list">
                    <router-link v-bind="{to:'/photo/photoinfo/'+item.id}">
                        <img v-lazy="imgurl+item.img_url">
                        <div id="desc">
                            <h5 v-text="item.title"></h5>
                            <p v-text="item.zhaiyao"></p>
                        </div>
                    </router-link>
    
                </li>
            </ul>
        </div>
    </div>
</template>

 <script type="text/ecmascript-6">
import { Toast } from 'mint-ui'
import common from '../../kits/common.js'
export default {

    data() {
        return {
            imgurl: "http://ofv795nmp.bkt.clouddn.com/",
            ulWidth: 320,
            cates: [],
            list: [

            ]
        }

    },
    created() {
        this.getnavlist();
        this.getimgs();
    },
    methods: {
        getnavlist() {
            var url = common.apidomain + "/api/getimgcategory/"
            this.$http.get(url).then(function (response) {
                console.log(response.body)
                if (response.body.status != 0) {
                    Toast(response.body.message);
                    return;
                }
                this.cates = response.body.message;
                var w = 37;
                var total = response.body.message.length + 1;
                console.log('total:' + total)
                this.ulWidth = w * total * 2;
                console.log(this.ulWidth)
            })
        },
        getimgs(cateid) {

            cateid = cateid || 0;
            var url = common.apidomain + "/api/getimages/" + cateid;
            this.$http.get(url).then(function (res) {
                var body = res.body
                console.log(body)
                if (body.status != 0) {
                    Toast(body.message);
                    return;
                }
                this.list = body.message;
            })
        }
    }
}
</script>

<style scoped >
#cate {
    width: 414px;
    max-width: 414px;
    overflow-x: auto;
}

#cate ul {
    /* width: 2000px; */
    margin: 0;
    padding: 0px;

    height: 48px;
}

#cate .bgc {
    background-color: red;
}

#cate li {
    cursor: pointer;
    list-style: none;
    float: left;
    padding: 5px 8px;
    color: rebeccapurple;
    font-size: 14px;
}

#imglist {
    padding: 5px;
}

#imglist ul {
    padding: 0;
    margin: 0;
}

#imglist li {
    list-style: none;
    /* position: absolute; */
    height: 300px;
}

#imglist li img {
    width: 100%;
    height: 300px;
}

#desc {
    padding: 5px;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    transform: translateY(-100%);
}

#desc h5 {
    color: #fff;
    font-weight: bold;
}

#desc p {
    color: #fff;
    font-size: 12px;
}

image[lazy=loading] {
	width: 40px;
	height: 300px;
	margin: auto;
}
</style>
